<template>
<div class="winPop" @click.stop>
  <dl class="tabMenu">
    <dd :class="{'curr':tabMenu==1}" @click="tabMenu=1">我的中奖记录</dd>
    <dd :class="{'curr':tabMenu==0}" @click="tabMenu=0">我的收货地址</dd>
  </dl>
  <div class="winList" v-if="tabMenu==1">
    <ul>
      <li v-for="item in dataShow">
        {{item.adardlevel}}
        <b class="c02">{{item.content}}</b>
      </li>
    </ul>
    <div class="text c02">请通过该网页的中奖信息，前往你所填写的兑奖地址领取奖品，兑奖地址必须是花瑾堂品牌合作门店地址，非门店地址无法参与兑奖。</div>
  </div>
  <div class="myAddress" v-if="tabMenu==0">
    <div class="box">
    <div class="addre">
      {{dataShow2.username}}<br/>
      {{dataShow2.phonemun}}<br/>
      {{dataShow2.address}}
    </div>
    <button class="btnStyle btn3" @click="homePopEdit(4)">修改</button>
    </div>
    <div class="text c02">填写的地址必须为花瑾堂合作门店地址，中奖之后前往合作门店兑换奖品，非合作门店地址无法参与兑奖。地址必须包含门店名称。</div>
  </div>

</div>
</template>

<script>
import {mapMutations} from 'vuex';
export default{
  data:()=>{
    return{
      tabMenu:0,
      dataShow:'',
      dataShow2:''
    }
  },
  mounted(){
    this.dataShowFn();
  },
  methods:{
    ...mapMutations(['homePopEdit']),
    dataShowFn(){
      this.http(this.api.getWTPrize,{
        token:localStorage.getItem('token')
      }).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            this.dataShow=res.data.data;
            break;
          default:
            Toast(res.data.msg);
        }
      });
      this.http(this.api.getAddress,{
        token:localStorage.getItem('token')
      }).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            this.dataShow2=res.data;
            break;
          default:
            Toast(res.data.msg);
        }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.winPop{
  background-color:#FFF;
  border-radius:14px;
  width:348px;
  height:400px;
  display:flex;
  flex-direction: column;
  position:relative;
  &:before{
    position:absolute;
    content:'×';
    border:1px solid #FFF;
    border-radius:50%;
    width:35px;
    line-height:35px;
    color:#FFF;
    left:0;
    right:0;
    bottom:-60px;
    margin:auto;
    font-size:30px;
    pointer-events:none;
  }
  .tabMenu{
    background-color:#F0F0F0;
    line-height:50px;
    display:flex;
    border-radius:14px 14px 0 0;
    overflow:hidden;
    dd{
      font-size:14px;
      flex:1;
      &.curr{
        background-image: linear-gradient(-180deg, #FAD961 0%, #F76B1C 100%);
        color:#FFF;
      }
    }
  }
  .winList,.myAddress{
    flex:1;
    height:50%;
    overflow:auto;
    padding:20px;
    display:flex;
    flex-direction:column;
    ul,.box{
      flex:1;
    }
    .text{
      text-align:left;
      font-size:12px;
    }
  }
  .winList{
    ul{
      li{
        text-align:left;
        padding:11px 0;
        font-size:14px;
        border-bottom:1px solid #EEE;
        b{
          display:block;
          font-size:24px;
        }
      }
    }
  }
  .myAddress{
    .addre{
      text-align:left;
      font-size:14px;
      line-height:1.8;
    }
    .btn3{
      float:right;
      margin-top:20px;
    }
  }
}
</style>
